<template>
	<view class="fuyao-body tn-padding-sm">
		<view class="view1 tn-margin-bottom-sm">
			<view class="avatar-item tn-float-left">
				<tn-avatar size="lg" v-if="detailInfo.childImgId" :src="detailInfo.childAvatar"></tn-avatar>
				<tn-avatar size="lg" v-else src="https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2"></tn-avatar>
			</view>
			<view class="tn-float-left names-view">
				
					<view class="namevstr">
						{{detailInfo.childName}}
					</view>
					
						<view class="color-2 ">
							{{detailInfo.className}}
						</view>
			</view>
			<view class="tn-float-right right-tst">
				<view class="tn-color-red tn-text-right state-str">
					{{detailInfo.stateStr}}
				</view>
				<view class="color-2 tn-text-right">
					{{detailInfo.createdTime}}
				</view>
			</view>
		</view>
		<view class="view-item">
			<view class="tn-float-left left-view">
				<text class="left-text-1">服药时间</text>
			</view>
			<view class="tn-float-left right-view tn-text-right" >
				<text>{{detailInfo.medicationTime}}</text>
			</view>
		</view>
		<view class="view-item">
			<view class="tn-float-left left-view">
				<text class="left-text-1">药品名称</text>
			</view>
			<view class="tn-float-left right-view tn-text-right">
				<text>{{detailInfo.name}}</text>
			</view>
		</view>
		<view class="view-item shuoming-item">
			<view class="tn-float-left tn-padding-right left-view">
				<text class="left-text-1">服药说明</text>
			</view>
			<view class="tn-float-left right-view tn-text-right">
				<text>{{detailInfo.explain}}</text>
			</view>
		</view>
		<view class="view-item">
			<view class="tn-float-left tn-padding-right">
				<text class="tn-padding-right-sm left-text-1">药品图片</text>
			</view>
			<view class="img-content">
				<view class="img-up-view">
				  <view class="imgs-content-view">
					  <view v-for="(item,index) in fileImgList" :key="index" class="tn-image-upload__item">
						<image class="tn-image-upload__item__image" :src="item" mode="aspectFill" @click="showImage(item)"></image>
					  </view>
				  </view>
				</view>
			</view>
		</view>
		<view class="view-item">
			<view class="tn-float-left tn-padding-right left-view">
				<text class="left-text-1">家长</text>
			</view>
			<view class="tn-float-left right-view tn-text-right">
				<text>{{detailInfo.parentName}} ({{detailInfo.relationshipStr}})</text>
			</view>
		</view>
		<view class="view-item">
			<view class="tn-float-left tn-padding-right left-view">
				<text class="left-text-1">家长签名</text>
			</view>
			<view class="img-content">
				<view class="qianming-img">
					  <image v-if="detailInfo.autographImg" :src="detailInfo.autographImg" @click="showImage(detailInfo.autographImg, true)"></image>
					  <text v-else>无签名</text>
				</view>
			</view>
		</view>
		
		<view class="tn-padding-sm bottom-view" v-if="detailInfo.state == 0">
			<tn-button width="45%" backgroundColor="#E83A30" fontColor="#ffffff" @click="editFunction">驳回</tn-button>
			<tn-button class="right-btn" width="45%" backgroundColor="#79CF67" fontColor="#ffffff" @click="sumitFunction">确认</tn-button>
		</view>
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" :class="isSign?'active':''" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
		<tn-popup
		  v-model="showpopup"
		  length="50%"
		  mode="center"
		  backgroundColor="#ffffff"
		  width="80%"
		  :borderRadius="10"
		  @close="closedPopup"
		>
		  <view class="popup-content tn-padding">
			  <view class="tn-text-center">
			  	请说明驳回原因
			  </view>
			  <view class="pop-time tn-margin-bottom" style="font-size: 12px;">
				  <tn-input class="mingc-inp" v-model="bohuiyuanyin" placeholder="填写驳回原因" type="textarea" :height="200" :border="true" />
			  </view>
			  <view class="">
			  	<tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="45%" backgroundColor="#C6D1D8" fontColor="#ffffff">取消</tn-button>
			  	<tn-button class="opo-bottom-btn-right" shape="round" @click="querenfunction()" width="45%" backgroundColor="#79CF67" fontColor="#ffffff">确认</tn-button>
			  	
			  </view>
		   </view>
		</tn-popup>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	
	export default {
		name: 'youerruyuan',
		data(){
			return {
				fuyaoshijian: '',
				yaopinmingcheng: '',
				fuyaoshuoming: '',
				fileList: [],
				qianmingsrc: '',
				detailId: '',
				detailInfo: {},
				imageTitle: '',
				previewImg: '',
				fileImgList: [],
				isSign: false,
				showpopup: false,
				bohuiyuanyin: ''
			}
		},
		onLoad:function(options){
		    console.log(options.id);   // 2
			this.detailId = options.id
		},
		onShow() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.getDetail()
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		},
		methods:{
			getDetail(){
				if(!this.detailId){
					return
				}
				this.request({
					url: '/MRegister/Get',
					method: 'get',
					params: {
						id: this.detailId
					},
				}).then(res => {
					if(res.code == 200){
						this.fileImgList = []
						this.detailInfo = res.data
						if(res.data.childImgId){
							this.detailInfo.childAvatar = this.imageTitle +  res.data.childImgId
						}
						if(res.data.drugsImage){
							res.data.drugsImage.forEach(item => {
								this.fileImgList.push(this.imageTitle + item.filedId)
							})
						}
						
					}
				})
			},
			closedPopup(){
				this.bohuiyuanyin = '';
				this.showpopup = false;
			},
			editFunction(){
				this.showpopup = true
			},
			querenfunction(){
				if(!this.bohuiyuanyin){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写驳回原因',
					  icon: '',
					  image: '',
					  duration: 1000
					})
					return;
				}
				let obj = {
					id: this.detailId,
					rejectReason: this.bohuiyuanyin
				}
				this.request({
					url: '/MRegister/Reject',
					method: 'post',
					params: obj
				}).then(res => {
					if(res.code == 200){
						this.$refs.toast.show({
							title: '',
							content: '驳回成功',
							icon: 'success',
							image: '',
							duration: 1500
						})
						uni.navigateBack({delta:1});
					}else{
						this.$refs.toast.show({
							title: '',
							content: res.message,
							icon: 'fail',
							image: '',
							duration: 1500
						})
					}
				})
			},
			sumitFunction(){
				
				let obj = {
					id: this.detailId,
				}
				this.request({
					url: '/MRegister/Confirmed',
					method: 'post',
					params: obj
				}).then(res => {
					if(res.code == 200){
						this.$refs.toast.show({
							title: '',
							content: '记录已确认',
							icon: 'success',
							image: '',
							duration: 1500
						})
						uni.navigateBack({delta:1});
					}else{
						this.$refs.toast.show({
							title: '',
							content: res.message,
							icon: 'fail',
							image: '',
							duration: 1500
						})
					}
				})
			},
			showImage(item, issign){
				this.previewImg = item;
				this.isSign = issign?true:false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fuyao-body{
		min-height: 100vh;
		padding-bottom: 100rpx;
		background-color: rgba(245, 245, 245, 1);
	}
	.view1{
		overflow: hidden;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding:10rpx 30rpx;
	}
	.avatar-item{
		height: 100rpx;
		line-height: 100rpx;
	}
	.names-view{
		height: 100%;
		margin-left: 20rpx;
		font-size: 20rpx;
		color: #555555;
	}
	.namevstr{
		color: #111111;
		font-size: 28rpx;
		padding-bottom: 8rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
		font-weight: 550;
	}
	.right-tst{
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.state-str{
		padding-bottom: 8rpx;
		margin-bottom: 10rpx;
	}
	.view-item{
		min-height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding:0 30rpx;
		margin-bottom: 16rpx;
	}
	.mingc-inp{
		width: 100%;
		margin-top: 18rpx;
		background-color: #ffffff;
	}
	.right-view{
		width: calc(100% - 150rpx);
		color: #555555;
	}
	.left-view{
		width: 150rpx;
	}
	.img-up-view{
		margin-bottom: 30rpx;
	}
  .tn-image-upload__item {
    width: 100%;
    height: 180rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
		  float: left;
    &__image {
      width: 100%;
      height: 180rpx;
      border-radius: 30rpx;
    }
  }
  .tn-image-upload__custom-btn {
    background-color: $tn-font-holder-color;
    width: 100%;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30rpx;
  }
	.tn-image-upload__item {
	    width: 190rpx;
	    height: 190rpx;
	    border-radius: 30rpx;
	    margin-bottom: 20rpx;
		margin-right: 20rpx;
		position: relative;
	    &__image {
	      width: 100%;
	      height: 100%;
	      border-radius: 30rpx;
	    }
		  .tn-icon-close{
			  position: absolute;
			  top: 10rpx;
			  right: 10rpx;
			  font-size: 30rpx;
			  color: #333333;
			  line-height: 36rpx;
		  }
	  }
	  .image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(1, 1, 1, 1);
		  &.active{
			  background-color: rgba(255,255,255, 1);
		  }
		  .tn-icon-close{
			  position: absolute;
			  top: 10rpx;
			  right: 10rpx;
			  font-size: 36rpx;
			  z-index: 888;
			  color: #333333;
			  line-height: 36rpx;
		  }
	  }
	  .imgs-content-view{
		  overflow: hidden;
	  }
	  .upload-view-cls{
		  width: 190rpx;
		  height: 190rpx;
		  border: 1px solid #dddddd;
		  float: left;
		  line-height: 190rpx;
		  text-align: center;
		  .tn-icon-add{
			  font-size: 80rpx;
		  }
	  }
	.img-content{
		overflow: hidden;
		width: 100%;
	}
	  .bottom-view{
		  position: fixed;
		  bottom: 0rpx;
		  left: 0rpx;
		  width: 100%;
		  z-index: 11;
		  background-color: rgba(245, 245, 245, 1);
	  }
	  .qianming-img{
		  width: 60%;
	  }
	  .shuoming-str{
		  width: 100%;
		  float: left;
		  color: #555555;
	  }
	  .shuoming-item{
		  
		  	min-height: 40rpx;
		  	line-height: 40rpx;
	  }
	  .right-btn{
		  margin-left: 8%;
	  }
	  .opo-bottom-btn-right{
		  margin-left: 8%;
	  }
	.color-2{
		color: #555555;
	}
	.left-text-1{
		font-size: 28rpx;
		font-weight: 550;
	}
</style>